<template>
  <div v-loading="listLoading" style="min-height: 100px;">
    <u-table
      v-if="list.items.length"
      ref="saleTable"
      :data="list.items"
      :height="tableHeight"
      :row-height="49"
      :border="false"
      :row-class-name="tableRowClassName"
      use-virtual
      row-key="id"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @select="selectTable"
      @select-all="selectTable"
      @sort-change="sortMethod">
      <u-table-column
        :reserve-selection="true"
        align="center"
        fixed="left"
        type="selection"
        width="50" />
      <u-table-column align="left" label="销售" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.market" />
        </template>
      </u-table-column>
      <u-table-column align="right" label="含税金额(元)" min-width="140" sortable="custom" prop="taxAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="right" label="销售占比" min-width="110" sortable="custom" prop="taxAmount">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.salesShare" :content="scope.row.salesShare" placement="top">
            <span class="content">{{ scope.row.salesShare }}</span>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="right" label="核销金额(元)" min-width="140" sortable="custom" prop="writeOffAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.writeOffAmount" :price="scope.row.writeOffAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="right" label="待核销金额(元)" min-width="150" sortable="custom" prop="unWriteOffAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.unWriteOffAmount" :price="scope.row.unWriteOffAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="客户名称" min-width="130">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.customer" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="所属部门" min-width="150">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.departmentName" />
        </template>
      </u-table-column>
    </u-table>
    <empty-placeholder v-else-if="!isInit" style="margin-bottom: 24px" />
  </div>
</template>

<script>
import { format } from '@/filters/date';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import tableSelections from '@/mixins/tableSelections';
export default {
  name: 'ChargeReportTable',
  components: {
    EmptyPlaceholder
  },
  filters: {
    format
  },
  mixins: [tableSelections],
  props: {
    list: {
      type: Object | Array,
      default: () => ({})
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: String,
      default: '100vh'
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableRefName: 'saleTable', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      isUmyTable: true
    };
  },
  methods: {
    // 选择表格
    tableSelectionChange(e) {
      this.$emit('handleSelectionChange', e);
    },
    sortMethod(a) {
      let sortName = '';
      let sortType = '';
      if (a.order) {
        sortName = a.prop;
        sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.$emit('tableSort', { sortName, sortType });
    }
  }
};
</script>
